import React from "react";

import { connect } from "./utils/connect";

import { addAction } from "./store/actionCreators"; // 一些方法

const Index = (props) => {
  return (
    <div>
      <h1> home 1 : {props.counter} </h1>

      <button
        onClick={(e) => {
          props.addCounter(1);
        }}
      >
        add 1
      </button>
      <button
        onClick={(e) => {
          props.addCounter(5);
        }}
      >
        add 5
      </button>
    </div>
  );
};

const mapStateToProps = (state) => {
  return {
    counter: state.counter,
  };
};

const mapDispatchToProps = (dispatch) => {
  return {
    addCounter(num) {
      dispatch(addAction(num));
    },
  };
};

export default connect(mapStateToProps, mapDispatchToProps)(Index);
